<template>
  <div class="row">
    <div class="col-md-12">
      <Table
        v-if="currentView === BRIDGE_VIEW"
        title="桥梁历史状况查询"
        :pageData="pageData"
        searchHint="输入关键字搜索，多个关键字用空格隔开"
        @sizeChange="handleSizeChange"
        @pageTurning="handlePageTurning"
        @sortChange="handleSortChange"
        @filterChange="handleFilterChange"
        @search="handleSearch">
        <!--索引列-->
        <el-table-column type="index" align="center" width="80px"></el-table-column>
        <!--表格主体内容-->
        <el-table-column v-for="col of columns"
                         align="center"
                         :key="col.prop"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width"
                         :sortable="col.sortable">
        </el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="最近技术等级" align="center" width="150">
          <template slot-scope="scope">
            <el-tag :type="getBridgeEvaluationColor(scope.row.bridgeEvaluationLevel)" close-transition>
              {{!scope.row.bridgeEvaluationPoint?"暂无评定信息":(scope.row.bridgeEvaluationPoint + " / " + scope.row.bridgeEvaluationLevel)}}
            </el-tag>
          </template>
        </el-table-column>
        <!--操作列-->
        <el-table-column v-if="canView" label="操作" align="center" width="70px">
          <template slot-scope="scope">
            <el-button v-if="canView" size="mini" type="warning" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </Table>

      <!--查看详细-->
      <BridgeHistoryDetail
        v-if="currentView === BRIDGE_DETAIL_VIEW"
        :currentBridge="currentBridge"
        @onBack="currentView = BRIDGE_VIEW">
      </BridgeHistoryDetail>

    </div>
  </div>
</template>

<script>
  import Table from "../bridge/Table.vue"
  import BridgeHistoryDetail from "../../template/BridgeHistoryDetail.vue"
  import {hasAuthorizedFunction} from "../../../assets/js/global";
  import {VIEW} from "../../../assets/js/enum/FunctionType";
  import {COMPLETE, LOADING} from "../../../store/mutationTypes";
  import {doGet} from "../../../assets/js/utils/RequestUtils";
  import {getBridgeEvaluationColor} from "../../../assets/js/utils/EvaluationUtils";

  const DATA_URL = "/maintain/bridgeHistory/getBridgeList";

  const BRIDGE_VIEW = "BRIDGE_VIEW";

  const BRIDGE_DETAIL_VIEW = "BRIDGE_DETAIL_VIEW";

  export default {
    name:"BridgeHistory",
    data() {
      return {
        pageData:{
          data:[],
          pageSize:10,
          total:0,
          currentPage:1
        },
        columns:[
          {prop:"name", label:"桥名"},
          {prop:"roadNo", label:"路线号", sortable:"custom"},
          {prop:"bridgeCategoryName", label:"桥梁分类"},
          {prop:"fullAddressName", label:"所在地"},
          {prop:"unitsName", label:"管养单位"},
          {prop:"inspectionDate", label:"最近检查日期"}
        ],
        //根据搜索框输入的内容自动分割
        searchValues:[],
        sortProp:"",
        order:"",
        filter:{prop:"", values:[]},
        currentBridge:{},
        currentView:BRIDGE_VIEW,
        BRIDGE_VIEW,
        BRIDGE_DETAIL_VIEW
      }
    },
    computed:{
      canView() {
        return hasAuthorizedFunction(this, VIEW);
      }
    },
    methods:{
      handleSizeChange(pageSize) {
        this.pageData.size = pageSize;
        this.fetchData();
      },
      handlePageTurning(index) {
        this.pageData.currentPage = index;
        this.fetchData();
      },
      handleSearch(value) {
        this.searchValues = value.split(" ");
        this.fetchData();
      },
      handleSortChange({column, prop, order}) {
        this.sortProp = prop;
        this.order = order;
        this.fetchData();
      },
      handleFilterChange(filter) {
        this.filter = filter;
        this.fetchData();
      },
      handleView(data) {
        this.currentBridge = data;
        this.currentView = BRIDGE_DETAIL_VIEW;
      },
      handleBack() {
        this.currentView = BRIDGE_VIEW;
        this.currentBridge = {};
        this.fetchData();
      },
      fetchData() {
        this.$store.commit(LOADING);
        doGet(DATA_URL, {
          data:{
            pageSize:this.pageData.pageSize,
            currentPage:this.pageData.currentPage,
            searchArray:this.searchValues,
            sortProps:this.sortProp,
            order:this.order
          },
          component:this
        })
          .then(response=>this.pageData = response)
          .finally(()=>this.$store.commit(COMPLETE))
      },
      getBridgeEvaluationColor
    },
    activated() {
      this.fetchData();
    },
    components:{Table, BridgeHistoryDetail}
  }
</script>



// WEBPACK FOOTER //
// BridgeHistory.vue?978edeb0
